<template>
  <div class='xlfpagination'>
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="8"
      background
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "xlfpagination",
  data() {
    return {
     
    };
  },
  created() {
    
  },
  props: ["total"],
  methods: {
    handleCurrentChange(val) {
      this.$emit("getpage", val);
    },
   
  },
};
</script>
<style lang="less" scoped>
.xlfpagination {
  padding-bottom: 50px;
  text-align: center;
}
/* 分页 */
/deep/.el-pagination.is-background .btn-next,
/deep/.el-pagination.is-background .btn-prev,
/deep/.el-pagination.is-background .el-pager li {
  border: 1px solid #784312 !important;
  background-color: #fff !important;
  width: 40px !important;
  height: 40px !important;
  text-align: center !important;
  line-height: 40px !important;
  color: #784312 !important;
  border-radius: 50% !important;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #784312 !important;
  color: #fff !important;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #c0a184 !important;
}
/deep/.el-pagination.is-background .btn-next.disabled,
/deep/.el-pagination.is-background .btn-next:disabled,
/deep/.el-pagination.is-background .btn-prev.disabled,
/deep/.el-pagination.is-background .btn-prev:disabled,
/deep/.el-pagination.is-background .el-pager li.disabled {
  border: 1px solid #784312 !important;
  color: #784312 !important;
  opacity: 0.4 !important;
}

@media screen and (min-width: 350px) and (max-width: 900px) {
  /deep/.el-pagination.is-background .btn-next,
/deep/.el-pagination.is-background .btn-prev,
/deep/.el-pagination.is-background .el-pager li {
 
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
}
}
</style>
